
import React, {Component} from 'react';
import {StyleSheet, Text, View, TextInput, Button} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'


type Props = {};
export default class Regist extends Component<Props> {
  forgetPwd(){
    console.log(this.tel)
  }
  render() {
    return (
      <KeyboardAwareScrollView>
        <View style={styles.container}>
          <View style={styles.forgetPwdForm}>
            <Text style={styles.forgetPwdTitle}>忘记密码</Text>
            <View style={styles.forgetPwdItem}>
              <Text style={styles.forgetPwdLabel}>手机号</Text>
              <View>
                <TextInput
                  placeholder = {'请输入手机号码'}
                  style = {styles.forgetPwdTel}
                  onChangeText={text => {
                    this.tel = text;
                  }}
                />
              </View>
            </View>
            <View style={styles.forgetPwdItem}>
              <Text style={styles.forgetPwdLabel}>验证码</Text>
              <View style={styles.smsCodeContainer}>
                <TextInput
                  placeholder = {'请输入短信验证码'}
                  style={styles.forgetPwdSmsCode}
                  onChangeText={text => {
                    this.smsCode = text;
                  }}
                />
                <Text style={styles.sendSmsCode}>发送验证码</Text>
              </View>
            </View>
            <View style={styles.forgetPwdItem}>
              <Text style={styles.forgetPwdLabel}>设置登录密码</Text>
              <TextInput
                placeholder = {'请输入登录密码'}
                style={styles.forgetPwdPwd}
                onChangeText={text => {
                  this.pwd = text;
                }}
              />
            </View>
            <View style={styles.forgetPwdItem}>
              <Button
                title="确定"
                color="#CCCCCC"
                style={styles.forgetPwdBtn}
                onPress={() => {
                  this.forgetPwd()
                }}
              />
            </View>
          </View>
        </View>
      </KeyboardAwareScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  forgetPwdForm: {
    padding: 27,
    paddingTop: 50,
  },
  forgetPwdTitle: {
    color: '#282828',
    fontSize: 38,
  },
  forgetPwdItem: {
    marginTop: 37
  },
  forgetPwdLabel: {
    color: '#666666',
    fontSize: 16,
  },
  forgetPwdTel: {
    height: 43,
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
    color: '#D8D8D8'
  },
  smsCodeContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
  },
  forgetPwdSmsCode: {
    flex: 1,
    height: 43,
  },
  sendSmsCode: {
    color: '#3E73FF',
    fontSize: 14,
    marginTop: 10
  },
  forgetPwdPwd: {
    height: 43,
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
    color: '#D8D8D8'
  },
  forgetPwdBtn: {
    marginTop: 37,
  },
  forgetPwdFooter: {
    flex: 1,
    marginTop: 37,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  forgetPwd: {
    flex: 1
  },
  userRegist: {
    flex: 1,
    textAlign: 'right'
  }
});
